import React, {useState} from 'react';
import ProCard from "@ant-design/pro-card";
import {ProCardTabsProps, StatisticCard} from '@ant-design/pro-components';

import {Column, Gauge, Line, TinyArea} from "@ant-design/plots";
import {useMount, useRequest} from "ahooks";
import { Statistic } from 'antd';
import {
  financeChartStastic,
  findByLevelLogList,
  homeChartStastic,
  loginChartStastic
} from "../services/ant-design-pro/stastica";
import ProTable from "@ant-design/pro-table";


//const {Statistic} = StatisticCard;

/*const CodePreview: React.FC = ({children}) => (
  <pre className={styles.pre}>
    <code>
      <Typography.Text copyable>{children}</Typography.Text>
    </code>
  </pre>
);*/

const Welcome: React.FC = () => {
  const [tab, setTab] = useState ( 'tab1' );
  const [tabPosition, setTabPosition] = useState<ProCardTabsProps['tabPosition']> ( 'top' );
  const [welcomeHeaderStastic, setWelcomeHeaderStastic] = useState ()
  const [columnLine, setColumnLine] = useState<any[]> ()

  //
  const {
    run: fetchByFinanceChartStastic,
    data: dataListChart,
  } = useRequest ( financeChartStastic, {
    debounceWait: 100,
    manual: true,
  } );
  //
  const {
    runAsync: fetchByFomeChartStastic,
  } = useRequest ( homeChartStastic, {
    debounceWait: 100,
    manual: true,
  } );
//
  const {
    runAsync: fetchByLoginChartStastic,
  } = useRequest ( loginChartStastic, {
    debounceWait: 100,
    manual: true,
  } );
  //findByLevelLogList
  const {
    run: fetchByFindByLevelLogList,
    data: dataLisFindByLevelLogList,
  } = useRequest ( findByLevelLogList, {
    debounceWait: 100,
    manual: true,
  } );
  useMount ( () => {
    fetchByFinanceChartStastic ();
    fetchByFomeChartStastic ().then ( res => {
      let data = res.data;
      setWelcomeHeaderStastic ( data )
    } )
    //fetchByLoginChartStastic
    fetchByLoginChartStastic ().then ( res => {
      let data = res.data;
      setColumnLine(data)
    } )
    fetchByFindByLevelLogList()
  } );

  // @ts-ignore
  return (

    <>
      <ProCard size={"small"} ghost gutter={8}>

        <ProCard layout="center" bordered>

          <StatisticCard
            statistic={{
              title: '现在余额',
              value: welcomeHeaderStastic?.wallet?.price,
              precision: 2,
              prefix: '¥',
              description: (
                <>
                  <Statistic title="收入余额" precision={2} value={welcomeHeaderStastic?.wallet?.priceLog} prefix={"¥"}  />
                </>
              ),
            }}


          />


        </ProCard>
        <ProCard layout="center" bordered>
          <StatisticCard
            statistic={{
              title: '提现总额',
              precision: 2,
              value: welcomeHeaderStastic?.withdrawal?.price,
              prefix: '¥',
              description: (
                <>
                  <Statistic title="待审核" precision={2} value={welcomeHeaderStastic?.withdrawal?.wait} prefix={"¥"}  />
                </>
              ),
            }}

          />
        </ProCard>
        <ProCard layout="center" bordered>
          <StatisticCard
            statistic={{
              title: '订单总数',
              value: welcomeHeaderStastic?.order?.count,
              suffix: '数',
              description: (
                <>
                  <Statistic title="待发货" value={welcomeHeaderStastic?.order?.shipments} suffix={"数"}  />
                </>
              ),
            }}

          />
        </ProCard>
        <ProCard layout="center" bordered>
          <StatisticCard
            statistic={{
              title: '用户总数',
              value: welcomeHeaderStastic?.user?.users,
              suffix: '人',
              description: (
                <>
                  <Statistic title="代理" value={welcomeHeaderStastic?.user?.agent} suffix={"人"}  />
                </>
              ),
            }}
          />
        </ProCard>


      </ProCard>
      <ProCard size={"small"} split="vertical" style={{marginTop: "10px"}}>

        <ProCard style={{paddingLeft: "30px"}}

                 tabs={{
                   tabPosition,
                   activeKey: tab,
                   style: {height: "300px"},
                   items: [
                     {
                       label: `财务统计`,
                       key: 'tab1',
                       children: getColumn ( dataListChart?.data || [] ),
                     },
                     {
                       label: `代理统计`,
                       key: 'tab2',
                       children: `内容二`,
                     },
                     {
                       label: `用户统计`,
                       key: 'tab3',
                       children: getColumnLineChart(columnLine),
                     }
                   ],
                   onChange: (key) => {
                     setTab ( key );
                   }
                 }}

        />

        <ProCard title="排行" colSpan="30%">
          <div style={{height: 360}}>
            <ProTable  scroll={{ y: 356 }} size={"small"} style={{height: 360}} columns={[{dataIndex:"index",  valueType: 'indexBorder',width:30},{dataIndex:"avatar",valueType:"avatar",width:50},{dataIndex:"name"},{dataIndex:"price",valueType:"money"}]} options={false} pagination={false} showHeader={false} search={false} showSorterTooltip={false} dataSource={dataLisFindByLevelLogList?.data}></ProTable>

          </div>
        </ProCard>
      </ProCard>
    </>

  );
};


export default Welcome;

const getChart = () => {
  const data = [
    264, 417, 438, 887, 309, 397, 550, 575, 563, 430, 525, 592, 492, 467, 513, 546, 983, 340, 539, 243, 226, 192,
  ];
  const config = {
    height: 60,
    autoFit: false,
    data,
    smooth: true,
    areaStyle: {
      fill: '#d6e3fd',
    },
  };
  return <TinyArea {...config} />;
};


const getOvalGauge = () => {
  const config = {
    percent: 0.5,
    range: {
      color: 'l(0) 0:#B8E1FF 1:#3D76DD',
    },
    startAngle: Math.PI,
    endAngle: 2 * Math.PI,
    indicator: null,
    statistic: {
      title: {
        style: {
          fontSize: '36px',
          color: '#4B535E',
        },
        formatter: () => '70%',
      },
      content: {
        style: {
          fontSize: '14px',
          lineHeight: '14px',
          color: '#4B535E',
        },
        formatter: () => '加载进度',
      },
    },
  };
  return <Gauge {...config} />;
};


const getColumn = (a: any[]) => {
  console.log ( a )
  /* const data = [
     {
       type: '2022-01',
       sales: 138,
     },
     {
       type: '2022-02',
       sales: 52,
     },
     {
       type: '2022-03',
       sales: 161,
     },
     {
       type: '2022-04',
       sales: 45,
     },
     {
       type: '2022-05',
       sales: 148,
     },
     {
       type: '2022-06',
       sales: 78,
     },
     {
       type: '2022-07',
       sales: 108,
     },
     {
       type: '2022-08',
       sales: 28,
     },
     {
       type: '2022-09',
       sales: 58,
     },
     {
       type: '2022-10',
       sales: 28,
     },
     {
       type: '2022-11',
       sales: 48,
     },
     {
       type: '2022-12',
       sales: 38,
     }
   ];*/
  const config = {
    data: a,
    xField: 'name',
    yField: 'price',
    seriesField: 'y',
    isGroup: true,
    columnWidthRatio: 0.8,
    xAxis: {
      label: {
        autoHide: true,
        autoRotate: false,
      },
    },
    meta: {
      name: {
        alias: '月',
      },
      price: {
        alias: '总额',
      },
    },
  };
  return <Column style={{height: "300px"}} {...config} />;
};

const getColumnLineChart = (a: any[]|undefined) => {
  console.log ( a )
  const config = {
    data:a,
    xField: 'name',
    yField: 'count',
    seriesField: 'ym',
    xAxis: {
    //  type: 'time',
    },
    yAxis: {
      label: {
        // 数值格式化为千分位
     formatter: (v:any) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
      },
    },
  };

  return <Line style={{height: "300px"}} {...config} />;
};




